<template>
    <div>
        <ul class="topnav">
            <li><router-link to="/" tag="a">热门推荐</router-link></li>
            <li><router-link to="/hot/1" tag="a">热歌榜</router-link></li>
            <li><router-link to="/search" tag="a">搜索</router-link></li>
        </ul>
    </div>
</template>

<style lang="less" scoped>
ul.topnav{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    list-style: none;
    li{
        line-height: 40px;
        flex: 1 1 auto;
        a{
            display: inline-block;
            text-decoration: none;
            color: #000;
            &.router-link-exact-active{
                color: #D43C33;
                border-bottom: 2px solid #D43C33;
            }
        }
    }
}
</style>
